<template>
  
  <div>
    <labelNavigation></labelNavigation>

    <!-- 主体内容 -->
    <div class="main">
      
      <!-- 状态栏导航 -->
      <div class="top-navigation">

        <button class="state" :key="index" 
        v-for="(item,index) in stateData" 
        :class="{stateClick:index==state}" 
        @click="StateShow(index, item.id)">{{item.name}}</button>
        
      </div>

      <!-- 班级内容 -->
      <div class="classes-label" :key="index" v-for="(item, index) in classesData">
        <div class="classes-name">{{item.gradeId}}</div>
        <div class="personal">

          <div class="each" :key="index" v-for="(student, index) in item.data" @click="writeRemarks(student)">
            <div class="each-information">
              <span class="name">{{student.stuName}}</span>

              <div class="boy" v-if="student.sex==0">
                <span>♂</span>
                <span>男孩</span>
              </div>

              <div class="girl" v-if="student.sex==1">
                <span>♀</span>
                <span>女孩</span>
              </div>

            </div>
            <span class="right-photo">
              <img :src="`${ src1 + student.avatar }`" style="width:4rem;height:4rem;border-radius:50%;" v-if="student.avatar!=''">
              <img src="@/assets/images/boy.png" style="width:4rem;height:4rem;border-radius:50%;" v-if="student.sex==0&&student.avatar==''">
              <img src="@/assets/images/girl.png" style="width:4rem;height:4rem;border-radius:50%;" v-if="student.sex==1&&student.avatar==''">
            </span>
          </div>

        </div>

      </div>

    </div> 

  </div>  

</template>

<script>
import { getCommentsStatus } from "@/api/message/gradeTeacher";
import labelNavigation from '../components/background/labelNavigation3'
import module from "@/allurlimg/img";

export default {
  data() {
    return {
      src1: '',
      stateData: [ {name: '已填写', id: 1},{name: '未填写', id: 0} ],
      classesData: [],
      DataAll: null,
      gradeId: 1,
      state: 0,
    }
  },
  components: {
    labelNavigation,
  },

  methods: {
    writeRemarks(data) {
      this.$router.push({
        name:'writeRemarks',
        params:{student:data}
      })
    },
    getData(gradeId, data) {
      // this.classesOneData = data
      console.log(gradeId, data)
      this.classesData.push({
          gradeId: gradeId,
          data: data
        })
        console.log(this.classesData, 'classesData')
    },
    StateShow(index, id) {
      this.state = index
      this.gradeId = id
      this.getComments(this.gradeId)
    },

    async getComments(gradeId){
      // 已填写“1”，未填写“0”
      const res = await getCommentsStatus(gradeId)
      console.log(res, 'getComments')

      if ( JSON.stringify(res.rows[0])==="{}" ) {
        this.$message("数据为空请检查")
      } else if ( res.rows == undefined ) {
        this.$message("数据库错误请检查")
      } else {
        this.classesData = []
        for (const gradeId in res.rows[0]){
          this.getData(gradeId, res.rows[0][gradeId])
        }
      }
    }
  },
  
  created(){
    this.src1 = module.host;
    this.getComments(this.gradeId)
  }
}

</script>


<style scoped>
/* 主体内容 */
.main {
  border: 2px solid #f5f5f5;
  margin: 4rem 13.75rem;
  height: 800px;
}

/* 状态栏导航 */
.top-navigation {
  border-bottom: 2px solid #f5f5f5;
}

/* 填写状态 */
.state {
  border: 0px;
  padding: 8px 4px;
  background: #fff;
  margin: 1.25rem 0 0 5rem;
}

.stateClick {
  border-bottom: 2px solid #871616;
}

/* 班级内容区 */
.classes-label {
  display: flex;
  flex-direction: column;
  margin: 1.25rem 3.75rem;
}

/* 班级信息 */
.classes-name {
  display: flex;
  margin: 1.25rem;
  font-size: 16px;
  padding-left: 1rem;
  border-left: 2px solid #7C0000;
}

/* 个人信息栏 */
.personal {
  display: flex;
  flex-wrap: wrap;
  margin: .5rem 0;
}

/* 单个个人信息框 */
.each {
  display: flex;
  flex-direction: row;
  border-radius: 5px;
  margin: 20px 55px 20px 2px;
  border: 1px solid #f5f5f5;
  box-shadow:inset 0px 0px 2px 1px rgba(99,99,99,0.2);
	-webkit-box-shadow: 0px 0px 2px 1px rgba(99,99,99,0.2);
	-moz-box-shadow: 0px 0px 2px 1px rgba(99,99,99,0.2);
}

/* 左侧信息框 */
.each .each-information {
  display: flex;
  flex-direction: column;
  margin: 10px;
}

/* 姓名信息 */
.left-each .name {
  font-size: 16px;
}

/* 性别信息 */
.each .boy {
  font-size: 12px;
  margin-top: 7px;
  width: 60px;
  height: 20px;
  border-radius: 5px;
  padding: 2px 7px;
  color: #5f9eed;
  background: #e4f0fe;
  display: flex;
  flex-direction: row;
  justify-items: center;
}

.each .girl {
  font-size: 12px;
  margin-top: 7px;
  width: 60px;
  height: 20px;
  border-radius: 5px;
  padding: 2px 7px;
  color: #ed8c5f;
  background: #fef1e4;
  display: flex;
  flex-direction: row;
  justify-items: center;
}

/* 头像信息 */
.each .right-photo {
  margin: 5px 10px 5px 0;
  display: flex;
  width: 60px;
  height: 66px;
  border-radius: 50%;
}

</style>